<template>
  <div>
    <ul class="tab">
      <li :class="istrue==1?'active':''" @click="fn1">热门推荐</li>
      <li :class="istrue==2?'active':''" @click="fn2">上新推荐</li>
      <li :class="istrue==3?'active':''" @click="fn3">所有商品</li>
    </ul>
    <div :is="a"></div>
  </div>
</template>

<script>
import vHot from "./hot.vue";
import vNew from "./new.vue";
import vAll from "./all.vue";
export default {
    components:{
        vHot,
        vNew,
        vAll
    },
  data() {
    return {
      istrue: 1,
      a:"v-hot"
    };
  },
  methods:{
    fn1(){
        this.istrue=1
        this.a="v-hot"
    },
    fn2(){
        this.istrue=2
        this.a="v-new"
    },
    fn3(){
        this.istrue=3
        this.a="v-all"
    }
  }
};
</script>

<style scoped>
.tab {
  display: flex;
  width: 350px;
  height: 50px;
  margin: 0 auto;
}

.tab li {
  flex: 1;
  text-align: center;
  line-height: 50px;
  font-size: 20px;
  color: orange;
  background: #efefef;
}

.tab .active {
  color: white;
  background: orange;
}

</style>